import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

// 引入Ant Design Vue组件库
// 为什么要引入这个？Ant Design Vue提供了丰富的UI组件，让我们不用从零开始写样式
import Antd from 'ant-design-vue'
// 引入Ant Design Vue的样式文件
// 没有样式文件，组件看起来会很丑，就像人没有穿衣服一样
import 'ant-design-vue/dist/reset.css'

import App from './App.vue'
import router from './router'

const app = createApp(App)

// 注册Pinia状态管理器
// 什么是Pinia？可以想象成一个全局的数据仓库，所有组件都可以共享这里的数据
app.use(createPinia())
// 注册Vue Router路由管理器
// 什么是路由？就是根据网址的不同，显示不同的页面内容
app.use(router)
// 注册Ant Design Vue组件库
// 注册后，我们就可以在任何组件中直接使用a-button、a-table等组件了
app.use(Antd)

// 把Vue应用挂载到id为app的DOM元素上
// 这一步就像是把画挂到墙上，让应用显示出来
app.mount('#app')
